<template>
  <svg xmlns="http://www.w3.org/2000/svg" :width="_width" :height="_height" viewBox="0 0 48 48"
    preserveAspectRatio="xMidYMid meet" fill="none" role="presentation" ref="host">
    <path d="M8 8L40 40" data-follow-stroke="#333" :stroke="_stroke" stroke-width="4" stroke-linecap="round"
      stroke-linejoin="round" />
    <path d="M8 40L40 8" data-follow-stroke="#333" :stroke="_stroke" stroke-width="4" stroke-linecap="round"
      stroke-linejoin="round" />
  </svg>
</template>


<script setup lang="ts">


const props = defineProps({
  color: {
    type: String,
    required: false
  },
  fill: {
    type: String,
    required: false
  },
  stroke: {
    type: String,
    required: false
  },
  width: {
    type: [String, Number],
    required: false
  },
  height: {
    type: [String, Number],
    required: false
  },
  size: {
    type: [String, Number],
    required: false,
    default: "1em"
  },
})



const _fill = computed(() => {
  return props.fill || props.color
})

const _stroke = computed(() => {
  return props.stroke || props.color
})

const _width = computed(() => {
  return props.width || props.size
})

const _height = computed(() => {
  return props.height || props.size
})


const host = useTemplateRef('host');

onMounted(() => {
  if (!_fill) {
    host.value?.querySelectorAll('[data-follow-fill]').forEach(item => {
      item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
    })
  }
  if (!_stroke) {
    host.value?.querySelectorAll('[data-follow-stroke]').forEach(item => {
      item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
    })
  }
})
onUpdated(() => {
  if (!_fill) {
    host.value?.querySelectorAll('[data-follow-fill]').forEach(item => {
      item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
    })
  }
  if (!_stroke) {
    host.value?.querySelectorAll('[data-follow-stroke]').forEach(item => {
      item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
    })
  }
})
</script>